<template>
  <div class="m-subnav">
    <div class="wrap">
      <ul class="nav">
        <li>
          <a href="javascript:;">
            <span>推荐</span>
            <sub class="cor">&nbsp;</sub>
          </a>
        </li>
        <li>
          <a>
            <span>排行榜</span>
          </a>
        </li>
        <li>
          <a>
            <span>歌单</span>
          </a>
        </li>
        <li>
          <a>
            <span>主播电台</span>
          </a>
        </li>
        <li>
          <a>
            <span>歌手</span>
          </a>
        </li>
        <li>
          <a>
            <span>新碟上架</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "subnav",
  
};
</script>

<style lang="less" scoped>
.m-subnav {
  width: 100%;
  min-width: 1276px;
  margin: 0 auto;
  height: 35px;
  background-color: #c20c0c;
  .wrap {
    width: 1100px;
    line-height: 35px;
    height: 35px;
    margin: 0 auto;
    .nav {
      width: 744px;
      display: flex;
      color: #fff;
      margin: 0 auto;
      justify-content: space-evenly;
      font-size: 12px;
      a {
        display: inline-block;
      }

      .cor {
        background: url("~@/assets/image/topbar.png") no-repeat 0 9999px;
        display: block;
        position: absolute;
        top: 64px;
        width: 12px;
        height: 7px;
        margin-left: 16px;
        overflow: hidden;
        background-position: -226px 0;
      }
    }
  }
}
</style>
